<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <style>
        /* pages/particulars/particulars.wxss */
        .dheard{
            width: 80%;
            height: 100%;
        }
        .heard{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            color: #4B90DE;
            width:100%;
            height: 100px;
            margin-left: 25px;
            margin-bottom: 10px;
            /* background: plum; */

        }
        .heard img{
            width: 37px;
            height: 37px;
            margin-right: 5px;
        }
        .teishi{
            display: flex;
            align-items: center;
            justify-content: center
        }
        .body{
            /* height: 100%; */
            width:90%;
            color: #4B90DE;
            border: 1px solid #4B90DE;
            border-radius: 5px;
            padding: 10px 10px 20px 25px;
            overflow: hidden;
        }
        .title{
            margin-bottom: 10px;
            padding-top: 25px;
        }
        .title1{
            font-size: 25px;
            margin-right: 20px;
        }
        .title2{
            color: #fff;
            font-size: 18px;
            padding: 0 15px;
            background: #4B90DE;
        }
        .leibiao,
        .feiyong{
            font-size: 14px;
            /* background: pink; */
            margin-bottom: 10px;
        }
        .leibiao img{
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
        .style{
            color: #D7B87D;
            padding-right: 10px;
        }
        .shoufei{
            font-size: 14px;
            padding-bottom: 15px;
        }
        .dashed{
            width: 100%;
            height: 1px;
            border-bottom: 1px dashed #4B90DE;
        }
        .huoshizong{
            padding: 30px 0 20px 50px;
        }
        .jiaotongzong{
            padding: 25px 0 20px 50px;
            border-bottom: 1px dashed #4B90DE;
        }
        .huoshi{
            font-size: 25px;
            padding-bottom: 20px;
        }
        .jia{
            width: 40px;
            height: 40px;
        }
        .bottom{
            padding-top: 20px;
            font-size: 12px;
        }
        .style1{
            color: #D7B87D;
        }
        /* .anniu{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 500px;
        } */
    </style>
</head>
<body>
<!--pages/particulars/particulars.wxml-->
    <div class="dheard">
        <div class="heard">
            <span id="level"></span>
            <div class="teishi ">
                <img src="/img/5.png"></img>
                <span>小贴示</span>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="title">
            <span class="title1">交通标准</span>
            <span class="title2" bindtap="noticeClick">购票注意事项</span>
        </div>
        <!-- <div class="leibiao"> -->
        <div class="leibiao">
            <img src="/img/dian.png">
            <span >火车：</span>
            <span class="style" id="normal"></span>
        </div>
        <div class="leibiao">
            <img src="/img/dian.png"></img>
            <span>高铁/动车：</span>
            <span class="style" id="middle"></span>
        </div>
        <div class="leibiao">
            <img src="/img/dian.png"></img>
            <span>全列软席：</span>
            <span class="style" id="high"></span>
        </div>
        <div class="leibiao">
            <img src="/img/dian.png"></img>
            <span>飞机：</span>
            <span class="style" th:text="${travel.plane}"></span>
        </div>
        <div class="leibiao">
            <img src="/img/dian.png"></img>
            <span>轮船：</span>
            <span class="style" th:text="${travel.ship}"></span>
        </div>
        <div class="title">
            <span class="title1">住宿标准</span>
            <span class="title2" bindtap="noticeClick">注意事项</span>
        </div>
        <div class="shoufei">
            <span class="style" id="stayMoney"></span>
            <span>元/天</span>
        </div>
        <div class="dashed"></div>
        <div class="huoshizong">
            <div class="huoshi">伙食补助费</div>
            <div class="feiyong">
                <span class="style" name="food"></span>
                <span>元（</span>
                <span class="style" name="food1"></span>
                <span>元/天）</span>
            </div>
        </div>
        <img class="jia" src="/img/jia.png"></img>
        <div class="jiaotongzong">
            <div class="huoshi">交通费</div>
            <div class="feiyong">
                <span class="style" name="traffic"></span>
                <span>元（</span>
                <span class="style" name="traffic1"></span>
                <span>元/天）</span>
            </div>
        </div>
        <div class="bottom">
            <span>您到</span>
            <span th:text="${travel.city}"></span>
            <span>出差共</span>
            <span class="style1" th:text="${travel.timeDay}+'天,'"></span>
            <span>可获得差旅补助</span>
            <span class="style1" id="totalMoney"></span>
        </div>
    </div>
    <script th:inline="javascript">
        var single = [[${travel}]];
        var level;
        switch (single.level) {
            case '1':
                level='省部级';
                break;
            case '2':
                level='厅局级';
                break;
            case '3':
                level='普通人员';
                break;
        }
        $("#level").text(level+"出差标准: ");
        var stayMoney = JSON.parse(single.stayMoney);
        var foodMoney = JSON.parse(single.foodMoney);
        var trafficMoney = JSON.parse(single.trafficMoney);
        var train = JSON.parse(single.train);
        $("#stayMoney").text(stayMoney.standard);
        $("#normal").text(train.normal);
        $("#middle").text(train.middle);
        $("#high").text(train.high);
        $("span[name='food']").text(foodMoney.value);
        $("span[name='traffic']").text(trafficMoney.value);
        $("span[name='food1']").text(foodMoney.standard);
        $("span[name='traffic1']").text(trafficMoney.standard);
        $("#totalMoney").text(foodMoney.value + trafficMoney.value + '元');
    </script>
</body>
</html>